<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2025-03-30 17:18:47
 * @LastEditors: Cxy
 * @LastEditTime: 2025-09-26 09:54:49
 * @FilePath: \xy-admin\play\src\views\components\list.vue
-->
<script setup lang="ts">
import { changeSex, del, paginate } from './page'
import { XyIconRender } from '@/components/XyIcon'

const formList = reactive<FormList>([
  {
    label: '姓名',
    prop: 'name',
    type: 'input',
    value: ''
  },
  {
    label: '年龄',
    prop: 'age',
    type: 'input'
  },
  {
    label: '性别',
    prop: 'sex',
    type: 'select',
    data: [
      { label: '男', value: '男' },
      { label: '女', value: '女' }
    ]
  },
  {
    label: '生日',
    prop: 'shengri',
    type: 'date'
  },
  {
    label: '生日',
    prop: 'shengri',
    type: 'date'
  },
  {
    label: '地址',
    prop: 'address',
    type: 'date'
  },
  {
    label: '地址',
    prop: 'address',
    type: 'date'
  },
  {
    label: '示例',
    prop: 'date11',
    type: 'date'
  },
  {
    label: '示例',
    prop: 'date11',
    type: 'date'
  },
  {
    label: '示例',
    prop: 'date11',
    type: 'date'
  },
  {
    label: '示例',
    prop: 'date11',
    type: 'date'
  },
  {
    label: '示例',
    prop: 'date11',
    type: 'date'
  },
  {
    label: '日期1',
    prop: 'date11',
    type: 'date'
  },
  {
    label: '日期1',
    prop: 'date11',
    type: 'date'
  }
])
const tableRef = useTemplateRef('tableRef')
const submitForm = ({ formData }: FormEventParams) => {
  tableRef.value?.tableRef?.searchMethod?.(formData)
}
const resetForm = ({ formData }: FormEventParams) => {
  tableRef.value?.tableRef?.searchMethod?.(formData)
}
interface Student {
  id: number
  name: string
  age: number
  sex: string
  address: string
  banji: string
  shengri: string
  url: string
}
const tableConfig = reactive<TableConfig<Student>>({
  border: true,
  columns: [
    {
      type: 'single',
      prop: 'single'
    },
    {
      label: 'id',
      type: 'default',
      prop: 'id',
      defaultCell: props => {
        return h('div', { style: { color: 'red' } }, props.row.id + 2)
      }
    },
    {
      type: 'input',
      label: '姓名',
      prop: 'name',
      filterType: 'radio',
      filterData: [
        { label: '张三', value: '张三' },
        { label: '李四', value: '李四' },
        { label: '王五', value: '王五' }
      ]
    },
    {
      type: 'input',
      label: '年龄',
      prop: 'age',
      isShow: true
    },
    {
      type: 'date',
      label: '生日',
      prop: 'shengri',
      rule: [
        {
          required: true,
          message: '请选择日期',
          trigger: 'change'
        }
      ]
    },
    {
      type: 'radio.button',
      label: '性别',
      prop: 'sex',
      data: [
        {
          label: '男',
          value: '男'
        },
        {
          label: '女',
          value: '女'
        }
      ],
      async onChange({ formData: { id, sex } }) {
        await changeSex({ id, sex })
        tableRef.value?.tableRef?.searchMethod?.()
      }
    },
    { type: 'default', label: '地址', prop: 'address' },
    {
      type: 'default',
      label: '图片',
      prop: 'url',
      defaultCell: ({ row }: any) => {
        const url = row.url
        return h(ElImage, {
          src: url,
          'preview-src-list': [url],
          previewTeleported: true,
          'hide-on-click-modal': true,
          style: { height: '50px' }
        })
      }
    },
    {
      label: '操作',
      type: 'operate',
      prop: 'operate',
      width: 210,
      buttons: props => [
        {
          label: '删除',
          type: 'danger',
          isSecondConfirm: true,
          loading: false,
          title: '确定删除吗？',
          click: async props => {
            props.button.loading = true
            searchFormRef.value?.formRef?.setBtnLoading?.(true)
            await del(props.row.id)
            props.button.loading = false
            tableRef.value?.tableRef?.searchMethod?.()
          }
        },
        {
          label: '性别',
          type: 'default',
          isShow: (props: any) => {
            return props.row.sex === '男'
          },
          loading: false,
          click: async props => {
            props.pageData.loading = true
            props.button.loading = true
            searchFormRef.value?.formRef?.setBtnLoading?.(true)
            await changeSex({ id: props.row.id, sex: props.row.sex === '男' ? '女' : '男' })
            props.button.loading = false
            tableRef.value?.tableRef?.searchMethod?.()
          }
        },
        {
          label: '姓名',
          isShow: props.row.name === '张三',
          loading: false,
          click: async props => {
            props.pageData.loading = true
            props.button.loading = true
            searchFormRef.value?.formRef?.setBtnLoading?.(true)
            await changeSex({ id: props.row.id, name: props.row.sex === '男' ? '女' : '男' })
            props.button.loading = false
            tableRef.value?.tableRef?.searchMethod?.()
          }
        }
      ]
    }
  ],
  buttonTopOperateConf: [
    {
      label: '增加',
      type: 'primary',
      buttonPosition: 'left',
      icon: shallowRef(XyIconRender('line-md:plus-square')),
      click: data => {
        console.log(data)
      }
    },
    {
      label: '删除',
      type: 'danger',
      buttonPosition: 'left',
      icon: shallowRef(XyIconRender('line-md:document-delete')),
      click: data => {
        console.log(data)
      }
    },
    {
      label: '',
      circle: true,
      type: 'danger',
      buttonPosition: 'right',
      actionType: 'refresh'
    },
    {
      label: '',
      circle: true,
      type: 'danger',
      buttonPosition: 'right',
      actionType: 'columnAction',
      columnActionMethod: val => {
        console.log(val)
      }
    }
  ]
})
const searchFormRef = useTemplateRef('searchFormRef')
const searchMethod = async (searchData: SearchData, pageData: PageData, queryParams: any) => {
  // 一进页面不调用接口
  // if (!queryParams) return
  searchFormRef.value?.formRef?.setBtnLoading?.(true)
  pageData.loading = true
  const {
    data,
    pagination: { total }
  } = await paginate({ ...searchData, ...queryParams })
  searchFormRef.value?.formRef?.setBtnLoading?.(false)
  pageData.loading = false
  pageData.total = total
  pageData.tableData = data
}
onMounted(async () => {
  const a = await searchFormRef.value?.getFormRef?.()
  console.log(a)
  const b = await tableRef.value?.getFormRef?.()
  console.log(b)
  const c = await tableRef.value?.getTableRef?.()
  console.log(c)
})
const columnActionMethod = (columnActionData: any) => {
  console.log(columnActionData)
}
</script>

<template>
  <XySearchForm
    ref="searchFormRef"
    :rows="1"
    :formList="formList"
    isCard
    @submit-form="submitForm"
    @reset-form="resetForm"
  />
  <XyTable
    ref="tableRef"
    :tableConfig="tableConfig"
    @column-action-method="columnActionMethod"
    @search-method="searchMethod"
  />
</template>
<style scoped lang="scss"></style>
